<template>
  <view class="supplier-container">
    <!-- 供应商列表 -->
    <view class="supplier-list">
      <view
        class="supplier-item"
        v-for="(item, index) in supplierList"
        :key="index"
      >
        <view class="supplier-info">
          <image class="supplier-icon" :src="item.logo" mode="cover"></image>
          <view class="supplier-details">
            <view class="supplier-name">{{ item.name }}</view>
            <view class="supplier-address">{{ item.address }}</view>
          </view>
        </view>
        <view class="supplier-status">
          <text :class="['status-text', getStatusClass(item.audit_status)]">{{
            getStatusText(item.audit_status)
          }}</text>
          <button class="view-btn" @tap="showDetails(item)">查看</button>
        </view>
      </view>

      <!-- 没有数据时显示空状态 -->
      <view class="empty-state" v-if="supplierList.length === 0">
        <image
          class="empty-icon"
          src="https://cphimg.leyoo888.com/dev/upload/supplier/2025-05-07/1746597444638.png"
          mode="aspectFit"
        ></image>
        <text class="empty-text">暂无申请绑定店铺</text>
      </view>
    </view>

    <!-- 审核状态弹窗 -->
    <view class="approval-popup" v-if="showPopup">
      <view class="popup-mask" @tap="closePopup"></view>
      <view class="popup-content">
        <view class="popup-icon">
          <image
            class="status-icon"
            :src="getStatusImage(currentSupplier.audit_status).image"
            mode="aspectFit"
          ></image>
        </view>
        <view class="popup-title">{{
          getStatusImage(
            currentSupplier.audit_status,
            currentSupplier.audit_remarks
          ).text
        }}</view>
        <button class="submit-btn" v-if="currentSupplier.audit_status === 3" @tap="reSubmit">重新提交</button>

        <button class="close-btn" @tap="closePopup">关闭</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getSupplierBindList } from "@/api/supplier.js";
import { reApplySupplier as supplierBindAgain } from "@/apiShop/supplier.js";
import { onLoad } from "@dcloudio/uni-app";
import { showToast } from "@/utils/helper";
// 当前选中的供应商
const currentSupplier = ref(null);

// 弹窗显示状态
const showPopup = ref(false);

// 模拟供应商列表数据
const supplierList = ref([]);

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    1: "审核中",
    2: "已绑定",
    3: "审核不通过",
  };
  return statusMap[status] || "未知状态";
};

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    1: "status-pending",
    2: "status-approved",
    3: "status-rejected",
  };
  return classMap[status] || "";
};

// 获取状态样式类
const getStatusImage = (status, remark = "") => {
  const Image = {
    1: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-05-07/1746605107561.png",
    2: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-05-07/1746597449604.png",
    3: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-05-07/1746597453265.png",
  };
  const text = {
    1: "提交成功,待供应商审核",
    2: "恭喜你,绑定成功",
    3: `审核不通过,原因：${remark}`,
  };
  return { image: Image[status] || "", text: text[status] || "" };
};

// 显示供应商详情
const showDetails = (supplier) => {
  currentSupplier.value = supplier;
  showPopup.value = true;
};

// 关闭弹窗
const closePopup = () => {
  showPopup.value = false;
  setTimeout(() => {
    currentSupplier.value = null;
  }, 300);

};
const query = ref({
  limit: 10,
  page: 1,
  brand_id: "",
});
// 获取供应商数据 (实际应用中可能从API获取)
const fetchSupplierList = async () => {
  const res = await getSupplierBindList(query.value);
  supplierList.value = res.data;
};

const reSubmit = async () =>{
  await supplierBindAgain({
    id:currentSupplier.value.id,
  });
  showToast('重新提交成功')
  closePopup()
  await fetchSupplierList()
}

// 页面加载
onLoad(() => {
  fetchSupplierList();
});
</script>

<style lang="scss" scoped>
.supplier-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.supplier-list {
  padding-bottom: 30rpx;
}

.supplier-item {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .supplier-info {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .supplier-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 10rpx;
    }

    .supplier-details {
      margin-left: 20rpx;
      flex: 1;

      .supplier-name {
        font-size: 32rpx;
        color: #333333;
        font-weight: 500;
        margin-bottom: 10rpx;
      }

      .supplier-address {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .supplier-status {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .status-text {
      font-size: 26rpx;

      &.status-pending {
        color: #ff9800;
      }

      &.status-approved {
        color: #2196f3;
      }

      &.status-rejected {
        color: #f44336;
      }
    }

    .view-btn {
      background-color: #ffffff;
      color: #2196f3;
      border: 1px solid #2196f3;
      font-size: 24rpx;
      padding: 6rpx 30rpx;
      border-radius: 30rpx;
      line-height: 1.5;
      margin: 0;
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .empty-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999999;
  }
}

.approval-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;

  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 40rpx 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .popup-icon {
      margin-bottom: 30rpx;

      .status-icon {
        width: 100rpx;
        height: 100rpx;
      }
    }

    .popup-title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
      margin-bottom: 30rpx;
      text-align: center;
    }

    .popup-info {
      width: 100%;
      margin-bottom: 40rpx;

      .info-item {
        display: flex;
        margin-bottom: 15rpx;

        .info-label {
          font-size: 26rpx;
          color: #666666;
          width: 160rpx;
        }

        .info-value {
          font-size: 26rpx;
          color: #333333;
          flex: 1;
        }
      }
    }

    .close-btn {
      width: 67%;
      background-color: #2196f3;
      color: #ffffff;
      border-radius: 40rpx;
      font-size: 28rpx;
    }
    .submit-btn{
      width: 67%;
      background-color: red;
      color: #ffffff;
      border-radius: 40rpx;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }
  }
}
</style>
